<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>订单列表</title>
    <link rel="stylesheet" type="text/css" href="../css/element-plus.index.css">
    <script type="text/javascript" src="../js/vue.global.3.2.39.js"></script>
    <script type="text/javascript" src="../js/element-plus.2.2.15.js"></script>
    <script type="text/javascript" src="../js/element_plus_icons.2.0.9.js"></script>
    <script type="text/javascript" src="../js/axios.min.0.24.0.js"></script>
    <style>
    /*css样式设置*/
    /*为每个行元素添加底部外边距，除非它是最后一个子元素*/
    /* &:last-child伪类选择器：用于选择.el-row的最后一个子元素*/
        .el-row {
            margin-bottom: 20px;

        &
        :last-child {
            margin-bottom: 0;
        }

        }
        /*圆角边框*/
        .el-col {
            border-radius: 4px;
        }

        /*背景颜色*/
        .bg-purple-dark {
            background: #99a9bf;
        }

        .bg-purple {
            background: #d3dce6;
        }

        .bg-purple-light {
            background: #e5e9f2;
        }
       /*.grid-content设置网格系统中的单元格内容，
       圆角边框，最小高度36px，文本居中对齐，行高与最小高度相同以确保文本垂直居中，溢出设置。*/
        .grid-content {
            border-radius: 4px;
            min-height: 36px;
            text-align: center;
            line-height: 36px;
            overflow: hidden;
        }
        /*上下方向各10px的内边距，而左右方向的内边距为0*/
        .row-bg {
            padding: 10px 0;
            background-color: #f9fafc;
        }
    </style>
</head>
<body>
<div id="app">
    <el-breadcrumb separator="/">
        <el-breadcrumb-item>首页</el-breadcrumb-item>
        <el-breadcrumb-item>购物车列表</el-breadcrumb-item>
    </el-breadcrumb>
    <hr>
    <el-row>
        <el-col :span="4">
            <div class="grid-content bg-purple">鲜花ID</div>
        </el-col>
        <el-col :span="4">
            <div class="grid-content bg-purple-light">鲜花名称</div>
        </el-col>
        <el-col :span="4">
            <div class="grid-content bg-purple">价格</div>
        </el-col>
        <el-col :span="4">
            <div class="grid-content bg-purple-light">数量</div>
        </el-col>
        <el-col :span="4">
            <div class="grid-content bg-purple">操作</div>
        </el-col>
    </el-row>
    <el-row v-for="item in orderItemsList" :key="item.orderId">
        <el-col :span="4">
            <div class="grid-content bg-purple">{{ item.foodId }}</div>
        </el-col>
        <el-col :span="4">
            <div class="grid-content bg-purple-light">{{ item.foodName }}</div>
        </el-col>
        <el-col :span="4">
            <div class="grid-content bg-purple">{{ item.price }}</div>
        </el-col>
        <el-col :span="4">
            <div class="grid-content bg-purple-light">{{ item.quantity }}</div>
        </el-col>
        <el-col :span="4">
            <!--动态绑定v-bind-->
            <div class="grid-content bg-purple"><a :href="'/orderItems/delete/'+item.orderId">取消购买</a></div>
        </el-col>
    </el-row>
    <el-row>
        <el-col>
            <el-button type="primary" @click="onOrder">下单</el-button>
        </el-col>
    </el-row>

</div>
<script>
    const App = {
        data() {
            return {
                orderItemsList: [],
                currentUser: null
            };
        },
        methods: {
            //从服务器加载订单项列表
            loadOrderItemsList() {
                //返回购物项的列表数据
                //axios请求成功后的回调函数，resp是响应对象
                axios.get('/orderItems/list').then(resp => {
                    //将响应对象resp中的data属性赋值给当前对象的orderItemsList属性
                    this.orderItemsList = resp.data; // 假设 API 返回的数据在 data 属性中
                    this.orderItemsList = this.orderItemsList.data;
                    console.log(this.orderItemsList);
                }).catch(error => {
                    console.error('Error fetching data:', error);
                });
            },
            onOrder() {
                //sessionStorage在页面会话结束时（即页面被关闭时）会被清除
                //从浏览器的缓存中获取名为'userId'的项的值，并将这个值与字符串"1111"拼接后输出到控制台
                let userId = sessionStorage.getItem('userId');
                console.log("1111" + userId);

                //向服务器的/orders/onOrder/{userId}路径发起一个GET请求
                //从服务器获取与特定用户ID相关的订单数据
                axios.get('/orders/onOrder/'+ userId).then(resp => {
                    //将API返回的数据（假设它直接位于响应的data属性中）赋值给this.orderItemsList
                    this.orderItemsList = resp.data; //假设API返回的数据在 data 属性中
                    this.orderItemsList = this.orderItemsList.data;

                }).catch(error => {
                    console.error('Error on order:', error);
                });
            },


        },
        mounted() {
            this.loadOrderItemsList(); //在组件挂载后加载数据
        },
        create() {

        }
    };

    const app = Vue.createApp(App);
    app.use(ElementPlus);
    app.mount("#app");
</script>
</body>
</html>